<template>
    <div>
        <h1>2.图片引入</h1>
        <!-- 2.1 普通路径引入 -->
        <img src="@/assets/images/01.png" alt="">
        <img src="@/assets/images/logo.png" alt="">
        <hr>
        <!-- 2.2 模块化引入 -->
        <img :src="img01" alt="">
        <img :src="img02" alt="">
        <hr>
        <!-- 2.3背景图片使用 -->
        <div class="box box1"></div>
        <div class="box" :style="{background: 'url('+img02+')'}"></div>
    </div>
</template>

<script>
    import img01 from '@/assets/images/01.png'
    export default {
        data() {
            return {
                img01,
                img02: require('@/assets/images/logo.png')
            };
        },
        created(){
            console.log(this.img01,this.img02)
        }
    };
</script>

<style scoped lang="less">
.box{
    height: 300px;
    width: 300px;
    border: 1px solid #000;
}
.box1{
    background: url('../assets/images/01.png');
}
</style>